<template>
  <view class="top_box">
    <view class="top_title flex">
      <image src="/static/coin-images/FIL.png" />
      <view class="title_text flex1" v-if="locale == 'zh_TW'">{{
        data && data.goods_info.name
      }}</view>
      <view class="title_text flex1" v-else>{{
        data && data.goods_info.name_en
      }}</view>
      <!-- <view class="title_text flex1">{{ data && data.goods_info.name }}</view> -->
      <view class="state_text" v-if="data && data.sell_state == 1">{{
        data && data.sell_state_text
      }}</view>
      <view class="state_text" v-else>{{ data && data.state_text }}</view>
    </view>
    <view class="box_info flex">
      <view class="flex1">
        <view class="info_text">{{ $t("mf.order.one_power") }}</view>
        <view class="info_text">{{ $t("mf.order.one_price") }}</view>
        <view class="info_text">{{ $t("mf.order.cycle") }}</view>
        <view class="info_text">{{ $t("mf.order.buy_number") }}</view>
        <view class="info_text">{{ $t("mf.order.buy_price") }}</view>
      </view>
      <view class="info_data">
        <view class="info_number">{{ data && data.goods_info.power }} T</view>
        <view class="info_number"
          >{{ data && data.goods_info.price }} USDT</view
        >
        <view class="info_number">{{ data && data.goods_info.cycle_day }}</view>
        <view class="info_number">{{ data && data.number }}</view>
        <view class="info_number">{{ data && data.price_total_m }} M</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    data: {
      type: Object,
      default: null,
    },
    marbtm: {
      type: Number,
      default: 30,
    },
  },
  computed: {
    ...mapGetters("system", ["locale"]),
  },
};
</script>

<style>
.top_box {
  width: 100%;
  height: 600rpx;
  background: linear-gradient(270deg, #1b1b2b 0%, #232534 100%);
  box-shadow: 0px 3px 4px 0px rgba(0, 0, 0, 0.5);
  border-radius: 12rpx;
  box-sizing: border-box;
  padding: 30rpx;
  margin-bottom: 30rpx;
}
.top_title {
  height: 48rpx;
  width: 100%;
  margin-bottom: 40rpx;
}
.top_title image {
  width: 48rpx;
  height: 48rpx;
  margin-right: 20rpx;
}
.title_text {
  height: 45rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 45rpx;
}
.state_text {
  height: 42rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ff6565;
  line-height: 42rpx;
}
.info_text {
  height: 90rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  line-height: 90rpx;
  border-bottom: 1px solid #151935;
}
.info_text:last-child {
  border-bottom: none;
}
.info_number {
  height: 90rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 90rpx;
  text-align: right;
  border-bottom: 1px solid #151935;
}
.info_number:last-child {
  border-bottom: none;
}
</style>